/**
 * @fileoverview Menu Bar for Coding in Chrome editor.
 *
 * @license Copyright 2015 The Coding with Chrome Authors.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 * @author mbordihn@google.com (Markus Bordihn)
 */
{namespace cwc.soy.MenuBar autoescape="strict"}


/**
 * HTML template for the menu bar.
 */
{template .template}
  {@param prefix: string}
  {@param language: string}

  <div id="{$prefix}body">

    <div id="{$prefix}window-body">
      {call .button_ data="all"}
        {param id: 'minimize' /}
        {param icon: 'photo_size_select_small' /}
        {param title: 'minimize' /}
      {/call}
      {call .button_ data="all"}
        {param id: 'maximize' /}
        {param icon: 'fullscreen' /}
        {param title: 'maximize' /}
      {/call}
      {call .button_ data="all"}
        {param id: 'restore' /}
        {param icon: 'fullscreen_exit' /}
        {param title: 'restore' /}
      {/call}
      {call .button_ data="all"}
        {param id: 'close' /}
        {param icon: 'close' /}
        {param title: 'close' /}
      {/call}
    </div>

    <div id="{$prefix}language-body">
      {call .button_ data="all"}
        {param id: 'language' /}
        {param icon: 'language' /}
        {param title: 'Change language ...' /}
        {param badge: $language /}
      {/call}
    </div>

    <div id="{$prefix}account-body">
      {call .button_ data="all"}
        {param id: 'account' /}
        {param icon: 'perm_identity' /}
        {param title: 'Login' /}
      {/call}
      {call .button_ data="all"}
        {param id: 'account-logout' /}
        {param icon: 'person' /}
        {param title: 'Logout' /}
      {/call}
    </div>

    <div id="{$prefix}services-body">

      <div id="{$prefix}bluetooth-body">
        {call .button_ data="all"}
          {param id: 'bluetooth-connect' /}
          {param icon: 'bluetooth' /}
          {param title: 'Connect Bluetooth device...' /}
        {/call}
        {call .button_ data="all"}
          {param id: 'bluetooth-connected' /}
          {param icon: 'bluetooth_connected' /}
          {param title: 'Disconnect Bluetooth device...' /}
        {/call}
        {call .button_ data="all"}
          {param id: 'bluetooth-disabled' /}
          {param icon: 'bluetooth_disabled' /}
          {param title: 'Bluetooth is disabled!' /}
        {/call}
      </div>

      <div id="{$prefix}bluetooth-web-body">
        {call .button_ data="all"}
          {param id: 'bluetooth-web-connect' /}
          {param icon: 'bluetooth' /}
          {param title: 'Connect Bluetooth Web device...' /}
        {/call}
        {call .button_ data="all"}
          {param id: 'bluetooth-web-connected' /}
          {param icon: 'bluetooth_connected' /}
          {param title: 'Disconnect Bluetooth Web device...' /}
        {/call}
        {call .button_ data="all"}
          {param id: 'bluetooth-web-disabled' /}
          {param icon: 'bluetooth_disabled' /}
          {param title: 'Bluetooth Web is disabled!' /}
        {/call}
      </div>

      <div id="{$prefix}serial-body">
        {call .button_ data="all"}
          {param id: 'serial' /}
          {param icon: 'usb' /}
          {param title: 'Connect serial device...' /}
        {/call}
        <button id="{$prefix}serial-connected" class="mdl-button mdl-js-button mdl-button--icon mdl-button--accent">
          <i class="material-icons">usb</i>
        </button>
        <button id="{$prefix}serial-disabled"
                class="mdl-button mdl-js-button mdl-button--icon" 
                title="{msg desc=""}Serial is disabled!{/msg}"
                disabled>
          <i class="material-icons">usb</i>
        </button>
      </div>

      <div id="{$prefix}gamepad-body">
        {call .button_ data="all"}
          {param id: 'gamepad' /}
          {param icon: 'videogame_asset' /}
          {param title: 'Enable Gamepad support' /}
        {/call}
        {call .button_ data="all"}
          {param id: 'gamepad-connected' /}
          {param icon: 'videogame_asset' /}
          {param title: 'Gamepad' /}
        {/call}
      </div>

    </div>

  </div>
{/template}


/**
 * Menubar button.
 */
{template .button_ private="true"}
  {@param id: string}
  {@param icon: string}
  {@param title: string}
  {@param prefix: string}
  {@param? badge: string}

  <button id="{$prefix}{$id}"
          class="mdl-button mdl-js-button mdl-button--icon"
          title="{msg desc=""}{$title}{/msg}">
    <i class="material-icons{if $badge} mdl-badge mdl-badge--overlap{/if}"
      {if $badge}id="{$prefix}badge-{$id}" data-badge="{$badge}"{/if}>
      {$icon}
    </i>
  </button>
{/template}
